<div>
  <h4 class="pb-8">Typography defaults and helper classes</h4>
  <p>
    H1-h6, subtitle, body and caption as well as their respected classes (.h1,
    .h2...) use Material design
    <a
      class="a"
      href="https://material.io/design/typography/the-type-system.html#type-scale">
      type scale
    </a>
  </p>
  <div class="bg-gray-200 dark:bg-dark-700 p-4 my-4">
    <h1>.h1 header 1</h1>
    <h2>.h2 header 2</h2>
    <h3>.h3 header 3</h3>
    <h4>.h4 header 4</h4>
    <h5>.h5 header 5</h5>
    <h6 class="mb-3 mt-6">.h6 header 6</h6>
    <div class="subtitle-1">.subtitle-1</div>
    <div class="subtitle-2">.subtitle-2</div>
    <div class="body-1">.body-1</div>
    <div class="body-2">.body-2</div>
    <small>.caption</small>
  </div>

</div>
